<template>
  <div>
    <!-- <div class="m-title">新增页面</div> -->
    <div class="m-content">
      <Card>
        <Form ref="JForm" :model="formData" :rules="rules">
          <FormItem prop="name" label="页面名称">
            <Input v-model="formData.name" placeholder="请输入页面名称" :clearable="true"></Input>
          </FormItem>
          <FormItem prop="pid" label="父级页面">
            <Select v-model="formData.pid" placeholder="请选择父级页面(如为一级页面请选择“无”)" :filterable="true" :clearable="true">
              <Option :value="0">无</Option>
              <Option v-for="item in menuData" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem prop="path" label="页面路径">
            <Input v-model="formData.path" :clearable="true" placeholder="请输入页面路劲(格式：“/XXX”)"></Input>
          </FormItem>
          <div><Button type="primary" @click="addMenu">新增</Button></div>
        </Form>
      </Card>
    </div>
  </div>
</template>

<script>
import {mapActions} from 'vuex'

export default {
  data () {
    return {
      formData: {},
      menuData: [],   // 当前总菜单列表
      rules: {
        name: [
          {
            required: true,
            message: '页面名称不能为空',
            trigger: 'blur'
          }
        ],
        pid: [
          {
            required: true,
            message: '父级页面不能为空',
            trigger: 'change',
            type: 'number'
          }
        ],
        path: [
          {
            required: true,
            message: '页面路径不能为空',
            trigger: 'blur'
          },
        ]
      }
    }
  },
  mounted () {
    this._getMenuInfo()
  },
  methods: {
    // 获取总菜单列表
    async _getMenuInfo () {
      const url = "menuinfo"
      const res = await this.GET_DATA({
        dataUrl: url,
        isAll: 1
      })
      if (res) {
        this.menuData = res.data
      }
    },
    // 新增页面
    addMenu () {
      this.$refs.JForm.validate((valid) => {
        if (valid) {
          this._addMenu()
          this.formData = {}
        }
      })
    },
    async _addMenu () {
      const url = "addmenu"
      const res = await this.GET_DATA({
        dataUrl: url,
        ...this.formData
      })
      if (res) {
        res.code === '0000' && this.$Message.success('操作成功')
      }
    },
    ...mapActions({
      GET_DATA: "_GET_DATA"
    })
  }
}
</script>

<style lang="scss" scoped>
.m-content {
  margin-left: 15px;
}
</style>